<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div v-for="(op, i) in leftListData" :key="i" class="box">
          <div class="title">
            <div class="dot"></div>
            <span class="titleName">{{ op.name || '' }}</span>
          </div>
          <div class="contentView">
            <div class="round">
              <div class="roundText">{{ op.value || '' }}</div>
              <div class="roundName">{{ op.text || '' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="headTitle">
          <img src="@/assets/images/leftImg.png" alt="" />
          <div class="titleName">
            <div class="border"><div class="text">农场大数据监控</div></div>
            <div class="time"><RealTime /></div>
          </div>
          <img src="@/assets/images/rightImg.png" alt="" />
        </div>
        <div class="contentView">
          <div class="list">
            <div class="listItem">
              <div class="listTitle">总计</div>
              <div class="listNum">{{deviceList.totalCount}}台</div>
            </div>
            <div class="listItem">
              <div class="listTitle">在线</div>
              <div class="listNum">{{deviceList.onLineCount}}台</div>
            </div>
            <div class="listItem">
              <div class="listTitle">离线</div>
              <div class="listNum">{{deviceList.offLineCount}}台</div>
            </div>
          </div>
          <div class="name">监控画面</div>
          <!-- <PeiCharts height="600px"></PeiCharts> -->
          <MonitorVideo :monitor="monitor" />
        </div>
      </div>
      <div class="right">
        <div class="box">
          <div class="title">
            <div class="dot"></div>
            <span class="titleName">土壤监测</span>
          </div>
          <div class="contentView">
            <el-carousel height="144px" :interval="10e3" indicator-position="none">
              <el-carousel-item v-for="i in 4" :key="i">
                <div class="listView">
                  <div class="listItem">
                    <img src="@/assets/images/trwd.png" alt="" />
                    <div>
                      <div class="top">土壤温度</div>
                      <div class="num">{{ weather['SoilTemp' + i] || 26.3 }}℃</div>
                    </div>
                  </div>
                  <div class="listItem">
                    <img src="@/assets/images/trsd.png" alt="" />
                    <div>
                      <div class="top">土壤湿度</div>
                      <div class="num">{{ weather['SoilHum' + i] || 79.1 }}%</div>
                    </div>
                  </div>
                  <div class="listItem">
                    <img src="@/assets/images/trph.png" alt="" />
                    <div>
                      <div class="top">土壤PH</div>
                      <div class="num">{{ weather.PH || 8.0 }}</div>
                    </div>
                  </div>
                  <div class="listItem">
                    <img src="@/assets/images/trdd.png" alt="" />
                    <div>
                      <div class="top">土壤导电率</div>
                      <div class="num">us/cm</div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="box">
          <div class="title">
            <div class="dot"></div>
            <span class="titleName">害虫排名</span>
          </div>
          <div class="contentView">
            <ListProgress style="height: 400px;" :list="progressList"></ListProgress>
          </div>
        </div>
        <div class="box">
          <div class="title">
            <div class="dot"></div>
            <span class="titleName">孢子图片</span>
          </div>
          <div class="contentView">
            <SwiperComponent :image-list="imageList" height="200px"></SwiperComponent>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**  农场大数据平台 */
import { getDeviceList } from '@/api/device'
import { getDailyUV, gridWeather } from '@/api/weather.js'
import MonitorVideo from '@/components/MonitorVideo'
import RealTime from '@/components/RealTime'
import ListProgress from '../../components/ListProgress'
import SwiperComponent from '../../components/SwiperComponent'


export default {
  components: {
    MonitorVideo,
    RealTime,
    SwiperComponent,
    ListProgress
  },
  data() {
    return {
      monitor: {
        code: 'F19428593',
        title: '田间1号',
        url: 'https://open.ys7.com/v3/openlive/F19428593_1_1.m3u8?expire=1689386701&id=558323529280393216&t=fdea4e5768457585d46ca5cd1d17a461fc666a20e5e57d24f6841f93564bd8b0&ev=100'
      },
      leftListData: [],
      imageList: [
        require('@/assets/baozhi/1.jpg'),
        require('@/assets/baozhi/2.jpg'),
        require('@/assets/baozhi/3.jpg'),
        require('@/assets/baozhi/4.jpg'),
        require('@/assets/baozhi/5.jpg'),
        require('@/assets/baozhi/6.jpg'),
        require('@/assets/baozhi/7.jpg'),
        require('@/assets/baozhi/8.jpg')
      ],
      deviceList: null
    }
  },
  computed: {
    weather() {
      return this.$root.weather || {}
    }
  },
  created() {
    this.loadEqData()
    this.gridWeather()
  },
  methods: {
    async loadEqData() {
      this.deviceList = await getDeviceList()

    },

    gridWeather() {
      return Promise.all([getDailyUV('120.55,31.22', 5), gridWeather('120.55,31.22')]).then(([uvRes, weatherRes]) => {
        this.disposeLeftData(uvRes.data.daily[0], weatherRes.data.now)
      })
    },
    // 处理左侧列表数据
    disposeLeftData(UVData, weatherData) {
      this.leftListData[2] = {
        name: 'UVI提醒',
        text: UVData.category,
        value: UVData.level
      }
      this.leftListData[0] = {
        name: '温度提醒',
        text: '无警告',
        value: this.weather.Etemperature || 26.8 + '℃'
      }
      this.leftListData[1] = {
        name: '降雨播报',
        text: '无警告',
        value: this.weather.RainAdd || weatherData.precip + 'mm'
      }
      this.leftListData.push({
        name: '风速告警',
        text: this.weather.WindDirection || weatherData.windDir,
        value: this.weather.WindSpeed || weatherData.windScale + '级'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  //width: 1920px;
  //height: 1080px;
  width: 100%;
  height: 100%;
  background: rgba(2, 11, 16, 1);
  background-image: linear-gradient(90deg, rgba(14, 27, 43, 1) 1%, rgba(0, 0, 0, 0) 5%),
    linear-gradient(rgba(14, 27, 43, 1) 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 40px 20px;
  padding: 10px;
  box-sizing: border-box;
  .content {
    width: 100%;
    display: flex;
  }
}
.box {
  color: rgba(45, 139, 253, 1);
  .title {
    display: flex;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
    .dot {
      width: 20px;
      height: 20px;
      background: rgba(255, 232, 142);
      margin-right: 16px;
    }
    .titleName {
      font-size: 26px;
      font-weight: bold;
      color: rgba(45, 139, 253, 1);
    }
  }
  .contentView {
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .round {
    width: 170px;
    height: 170px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 2px solid rgba(89, 174, 243, 1);
    color: #fff;
    .roundText {
      font-size: 28px;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .roundName {
      font-size: 24px;
    }
  }
}
.left {
  width: 25%;
  height: 100%;
  margin-left: 20px;
}
.center {
  width: 46%;
  height: 100%;
  margin: 0 2%;
  .contentView {
    height: 872px;

    .video {
      height: calc(100% - 220px);
    }
  }
  .headTitle {
    display: flex;
    align-items: center;
    img {
      width: 113px;
      height: 113px;
    }
    .titleName {
      width: 100%;
      height: 142px;
      border: 1px solid rgba(89, 174, 243, 1);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6 10px;
      margin: 10px 16px;
      text-align: center;
      .border {
        width: 90%;
        margin-top: 10px;
        padding: 10px;
        border: 4px solid rgba(89, 174, 243, 1);
      }
      .text {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 32px;
        background: rgba(89, 174, 243, 1);
        font-weight: bold;
        border: 4px solid rgba(89, 174, 243, 1);
      }
      .time {
        width: 90%;
        background: rgba(89, 174, 243, 1);
        height: 30px;
        line-height: 30px;
        font-size: 22px;
      }
    }
  }
  .list {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .listItem {
      margin-top: 32px;
      color: #fff;
      &:nth-child(1) .listNum {
        background: linear-gradient(45deg, rgba(90, 174, 243, 1), rgba(74, 111, 226, 1));
      }
      &:nth-child(2) .listNum {
        background: linear-gradient(45deg, rgba(48, 203, 19, 1), rgba(74, 111, 226, 1));
      }
      &:nth-child(3) .listNum {
        background: linear-gradient(45deg, rgba(255, 151, 76, 1), rgba(74, 111, 226, 1));
      }
      .listTitle {
        font-size: 24px;
        text-align: center;
      }
      .listNum {
        margin-top: 12px;
        width: 180px;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        border-radius: 8px;
      }
    }
  }
  .name {
    width: 100%;
    padding: 32px 32px 12px 32px;
    font-size: 36px;
    color: #fff;
    box-sizing: border-box;
    text-shadow: 0 0 10px #fff;
  }
}
.right {
  width: 25%;
  height: 100%;

  .listView {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #fff;
    font-size: 18px;
    padding: 6px 0;
    box-sizing: border-box;
    .listItem {
      width: 40%;
      display: flex;
      margin-top: 10px;
      img {
        width: 50px;
        height: 46px;
        margin-right: 10px;
      }
      .top {
        font-size: 20px;
        line-height: 32px;
      }
      .num {
        font-size: 24px;
        color: #a8dffa;
        line-height: 24px;
        white-space: nowrap;
      }
    }
  }
}
</style>
